<template>
    <div id="headers" class="show-menu">
        <ul class="menu">
            <li class="menu-items" v-for="(item, index) in menuitems" :key="index">
                <router-link class="noselect-menu" v-bind:class="{'selectd-menu':item.url==$route.path}" v-bind:to="item.url">{{item.name}}</router-link>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  name: 'headers',
  data () {
    return {
      current: '/',
      menuitems: [{
        name: '首页',
        url: '/'
      }, {
        name: '文章',
        url: '/articles'
      }, {
        name: '相册',
        url: '/photos'
      }, {
        name: '关于',
        url: '/about'
      }, {
        name: '留言',
        url: '/comment'
      }]
    }
  },
  methods: {
    /* wheel (event){
        var delta = 0;
        if (!event) {
            event = window.event;
        }
        if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
            delta = event.wheelDelta/120;
            if (window.opera) {
                delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
            }
        } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
            delta = -event.detail/3;
        }
        if (delta){
            this.handle(delta);
        }
    },
    handle(delta){
        if (delta <0){//向下滚动
           //document.getElementById('headers').style.display = 'none';
        }else{//向上滚动
            document.getElementById('headers').style.position = 'sticky';
            document.getElementById('headers').style.top = '0';
        }
        console.log(delta);
    } */
  },
  mounted () {
    /* if (window.addEventListener){//FF,火狐浏览器会识别该方法
        window.addEventListener('DOMMouseScroll', this.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = this.wheel; */
  }
}
</script>
<style scoped>
  #headers {
    background-color: rgb(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    z-index: 100;
    left: 0px;
    right: 0px;
    margin-left:auto;
    margin-right:auto;
  }

  .menu {
    background-image: url(../../assets/logo-0.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    text-align: right;
    margin: auto;
    width: 1100px;
  }

  .menu-items {
    font: 1.5rem sans-serif;
    display: inline-block;
    list-style: none;
    margin: 1rem 1rem;
  }

  .noselect-menu {
    color: #fff;
    text-decoration: none;
    transition: color 1s;
    -moz-transition: color 1s; /* Firefox 4 */
    -webkit-transition: color 1s; /* Safari 和 Chrome */
    -o-transition: color 1s; /* Opera */
  }

  .selectd-menu {
    color: rgb(29, 205, 199);
    text-decoration: none;
  }

  .menu-items:hover a {
    color: rgb(29, 205, 199);
  }
</style>
